<style lang="less">
  .nCoV-container {
    .nCoV-header {
      position: relative;
      margin-bottom: 40px;
      .nCoV-header__img {
        width: 100%;
      }
      .nCov-bar {
        overflow: hidden;
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: -40px;
        border-radius: 6px;
        box-shadow: 0 0 8px 0 hsla(0, 6%, 58%, .6);
      }
    }
    .nCoV-now-warp {
      padding: 16px;
      .nCoV-now__img {
        width: 100%;
      }
    }
    .nCoV-main {
      .nCoV-cell-main {
        padding-bottom: 0;
      }
    }
    .nCoV-nav-bar {
      .van-grid-item__content {
        background: #f5f6f7;  
      }
    }
    .nCoV-footer {
      padding: 16px;
      .nCoV-tips {
        text-align: center;
        line-height: 50px;
        overflow: hidden;
        border-radius: 8px;
        background: #fff;
      }
    }
  }
</style>

<template>
  <div class="nCoV-container">
    <!-- 首部栏 -->
    <div class="nCoV-header">
      <img class="nCoV-header__img" src="https://x0.ifengimg.com/res/2020/4EE4669006B08ED95913F3F811F679D3397BA34F_size40_w900_h500.jpeg" />
      <van-grid class="nCov-bar fz-main-body1" :border="false">
        <van-grid-item>
          <div class="nCov-bar-item__title color-brand-fz fw500">{{ people.confirm }}</div>
          <div class="nCov-bar-item__value">确诊病例</div>
        </van-grid-item>
        <van-grid-item>
          <div class="nCov-bar-item__title color-brand-fz fw500">{{ people.suspected }}</div>
          <div class="nCov-bar-item__value">疑似病例</div>
        </van-grid-item>
        <van-grid-item>
          <div class="nCov-bar-item__title color-brand-fz fw500">{{ people.cure }}</div>
          <div class="nCov-bar-item__value">治愈人数</div>
        </van-grid-item>
        <van-grid-item>
          <div class="nCov-bar-item__title color-brand-fz fw500">{{ people.die }}</div>
          <div class="nCov-bar-item__value">死亡患者</div>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 实况图 -->
    <div class="nCoV-now-warp">
      <img class="nCoV-now__img" :src="epidemicImgUrl" />
    </div>
    <!-- 导航 -->
    <van-grid class="nCoV-nav-bar" :border="false">
      <van-grid-item icon="volume" text="谣言别信" to="/pages/nCoV/list?type=refutes" />
      <van-grid-item icon="manager" text="疾病自查" to="/pages/nCoV/list?type=inspection" />
      <van-grid-item icon="share" text="返程预防" to="/pages/nCoV/list?type=prevention" />
      <van-grid-item icon="friends" text="紧急寻人" to="/pages/nCoV/list?type=search" />
    </van-grid>
    <!-- 今日主推 -->
    <div class="nCoV-main">
      <van-cell class="nCoV-cell-main" title-class="fz-num-small fw500" title="今日主推" value="查看更多" :border="false" is-link to="/pages/nCoV/list?type=main" />
      <news-card v-if="article" :id="article.id" :title="article.title" :value="`更新于${article.date}`" />
      <van-divider v-else>暂无数据</van-divider>
    </div>
    <!-- 底部提醒 -->
    <div class="nCoV-footer color-brand">
      <div class="nCoV-tips color-main-text fz-colmun-title fw700">积极防护，保护自己，戴口罩，勤洗手</div>
      <van-divider :style="{ color: '#fff' }">武汉加油! 中国加油!</van-divider>
    </div>
  </div>
</template>

<script>
import NewsCard from '../../components/newsCard'
import NCoVApi from '../../api/nCoV'
export default {
  components: {
    NewsCard
  },
  data() {
    return {
      people: {
        confirm: 0,
        suspected: 0,
        cure: 0,
        die: 0
      },
      article: null,
      epidemicImgUrl: ''
    }
  },
  methods: {
    async getNCoVData() {
      let res = await NCoVApi.GetNCoVData()
      this.people = res.data.epidemic.people
      this.epidemicImgUrl = res.data.epidemic.imgUrl
    },
    async getNCoVMainArticleList() {
      let res = await NCoVApi.GetNCoVMainArticleList()
      this.article = res.data.list[0]
    }
  },
  created() {
    this.getNCoVData()
    this.getNCoVMainArticleList()
  },
}
</script>
